<template>
  <el-form ref="formRef" :model="form" label-width="120px" size="default">
    <el-form-item>
      <h2>
        <el-link type="warning">大批量添加注册卡信息的脚本。</el-link>
        <br />
        <el-link type="warning">请先到数据库查看最大的id号，加1之后当做第一个id，后续的id会逐个加1。</el-link>
      </h2>
    </el-form-item>
    <el-form-item>
      <el-upload action="#" :on-change="flieChange">
        <el-button type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="第一个id：">
      <el-input v-model="form.firstId" clearable class="input-width" @change="handleFirstIdChange"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="reset">重置</el-button>
      <el-button type="primary" @click="onSubmit">生成脚本</el-button>
      <el-button type="default" @click="exportFile">导出文件</el-button>
    </el-form-item>
    <el-form-item label="脚本：">
      <el-input autosize type="textarea" v-model="form.scriptString" readonly></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from "vue";
import saveAs from "@/views/script-generator/js/FileSaver";
import * as XLSX from "xlsx/xlsx.mjs";

const form = reactive({
  // 试管号
  firstId: 0,
  // 脚本
  scriptString: "",
  scriptInfo: ""
});

const add = () => {
  form.number.trim() ? form.numbers.push(form.number.trim()) : "";
  form.number = "";
};

const reset = () => {
  form.firstId = 0;
  form.scriptString = "";
};

const handleFirstIdChange = () => {
  if (form.scriptInfo.length == 0 || form.scriptInfo == "") return;

  if (!form.firstId.trim()) {
    form.firstId = 0;
  } else {
    form.scriptInfo.forEach((item) => {
      item.id = form.firstId;
      form.firstId++;
    });
  }
};

// const FILE_MAXSIZE = 2048; //这里可以自定义控制导入文件大小
const flieChange = (obj) => {
  //导入
  let file = obj.raw;
  if (!file) return;
  let endName = file.name.split(".")[1];
  if (endName !== "xls" && endName !== "xlsx") {
    alert("导入的文件格式不正确!");
    return;
  }
  if (obj.size / 1024 > 2048) {
    alert("导入的表格文件不能大于2M");
    return;
  }
  const reader = new FileReader();
  reader.onload = function (e) {
    // base64: 以base64方式读取；
    // binary: BinaryString格式(byte n is data.charCodeAt(n))
    // string: UTF8编码的字符串；
    // buffer: nodejs Buffer；
    // array: Uint8Array，8位无符号数组；
    // file: 文件的路径（仅nodejs下支持）；
    let finalData = XLSX.read(e.target.result, {
      type: "binary"
    });
    // 这是每个表格的名字。
    let SheetNames = finalData.SheetNames; // ['Sheet1', 'Sheet2', 'Sheet3']
    // 这是每页的数据内容。
    let Sheets = finalData.Sheets;
    // 调用方法转为json
    form.scriptInfo = XLSX.utils.sheet_to_json(Sheets[SheetNames[0]]);
  };
  // FileReader共有4种读取方法：
  // 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
  // 2.readAsBinaryString(file)：将文件读取为二进制字符串
  // 3.readAsDataURL(file)：将文件读取为Data URL
  // 4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
  reader.readAsArrayBuffer(file);
};

const exportFile = () => {
  let str = new Blob([form.scriptString], {
    type: "text/plain;charset=utf-8"
  });
  saveAs(str, `${form.scriptString.length}条大批量添加注册卡信息脚本.txt`);
};

const onSubmit = () => {
  let arr = [];
  form.scriptInfo.forEach((item) => {
    let i = `db.olympic_register_card_person.insert(${JSON.stringify(item)})\n`;
    arr.push(i);
  });
  form.scriptString = arr;
};
</script>

<style>
.input-width {
  width: 500px;
}
</style>
